<template>
  <div class="right-center" id="right-center"></div>
</template>

<script>
import { currentGET } from "@/api/modules/index";
export default {
  data() {
    return {
      categoryData: [],
      data: []
    };
  },
  created() {
    currentGET("big7").then(res => {
      this.categoryData = res.data.map(item => item.name);
      this.data = res.data.map(item => item.value);
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const myChart = echarts.init(document.getElementById("right-center"));
      const colors = [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452"
      ];

      const option = {
        tooltip: {
          trigger: "axis",
          formatter: "{b}: {c}"
        },
        grid: {
          left: "35%",  // 关键：增加左边距
          right: "5%",
        },
        xAxis: {
          type: "value",
          axisLabel: { 
            color: "#fff",
            formatter:'{value} 万'
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: this.categoryData,
          axisLabel: { 
            color: "#fff",
            fontSize: 12,
          },
          axisTick: {
            show: false  // 隐藏刻度线
          }
        },
        series: [{
          type: "bar",
          showbackground: true,
          data: this.data.map((value, index) => ({
            value: value,
            itemStyle: { 
              color: colors[index % colors.length],
              barBorderRadius: [5, 5, 5, 5]
            }
          })),
          barWidth: 8,  // 关键：缩小条形宽度
          label: {
            show: true,
            position: "right",
            color: "#fff",  // 标签文字颜色改为白色
          },
          animationDuration: 1500
        }]
      };
      myChart.setOption(option);
      
      // 可选：窗口变化时自适应
      window.addEventListener("resize", () => myChart.resize());
    }
  }
};
</script>

<style lang='scss' scoped>
#right-center {
  width: 400px;
  height: 300px; 
  /* 建议使用 vh/vw 单位实现响应式 */
  /* height: 30vh; */
}
</style>